<template>
	<view>
		<ttBar leftIcon="icon-back" title="店铺审核进度"></ttBar>
		<view class="auditorProgress" >
			<!-- <block v-if="settledInfo.status==1">
				<image src="../../static/authing.png"></image>
				<view class="auditorInfo">
					<text class="auditorTitle">审核中</text>
					<text class="auditorText">您的资质认证正在审核中，请耐心等待</text>
				</view>
			</block> -->
			<block >
				<image src="../../static/nopass.png"></image>
				<view class="auditorInfo">
					<text class="auditorTitle">审核未通过</text>
					<text class="auditorText">未通过原因：{{shopDetail.refuseMsg}}</text>
				</view>
			</block>
			<!-- <block v-else-if="settledInfo.status==3">
				<image src="../../static/sucess.png"></image>
				<view class="auditorInfo">
					<text class="auditorTitle">审核通过</text>
					<text class="auditorText">您的资质认证已审核通过</text>
				</view>
			</block> -->
			
		</view>
		<view class="progressBox">
			<view class="progressBg">
				
				<view class="settledStep hasPassed" >
					<view class="leftBox">
						<view class="stepNum">1</view>
						<view class="stepLine" v-if="settledInfo.type==1"></view>
					</view>
					<view class="rightInfo">
						<text class="stepName">填写店铺信息</text>
						<text class="stepInfo">填写门店名称、地址，联系方式</text>
					</view>
				</view>
				<view  class="settledStep hasPassed" v-if="settledInfo.type==1" >
					<view class="leftBox">
						<view class="stepNum">2</view>
					</view>
					<view class="rightInfo">
						<text class="stepName">提交店铺资质</text>
						<text class="stepInfo">按提示上传对应证照信息</text>
					</view>
				</view>
				
				<text class="editBtn" data-page="1" @tap="editShop" v-if="shopDetail.status==2" >重新修改</text>
			</view>
		</view>
	</view>
</template>

<script>
	
	import ttBar from "@/components/ttBar/ttBar.vue";
	import API from "@/common/api.js";
	import {mapState} from "vuex";
	export default {
		components: {
			ttBar
		},
		computed:{
			...mapState({
				shopDetail:state=>state.shop.shopDetail,
				settledInfo:state=>state.settled.settledProgress,
			})
		},
		data() {
			return {
				refuseMsg:'',
				shopId:'',
				type:''
			};
		},
		methods:{
			editShop(e){
				console.log(e.currentTarget.dataset.page);
				if(this.type==1){
					
					this.toPage({
						url:'editShop',
						shopId:this.shopId
					})
					
				}else{
					this.toPage({
						url:'personEditShop',
						shopId:this.shopId
					})
				}
				
				
			},
			getData(){
			}
		},
		onLoad(cfm) {
			this.shopId=cfm.shopId
			this.$store.dispatch("getShopDetailBySid",this.shopId)
			this.type=cfm.type
			this.getData()
		},
		onPullDownRefresh() {
			setTimeout(() => {
				this.$store.dispatch("getShopDetailBySid",this.shopId)
				this.getData()
				uni.stopPullDownRefresh();
			}, 1500)
		}
	}
</script>

<style lang="less">
	page {
		background-color: #f6f6f6;
	}

	.auditorProgress {
		background-color: #FFFFFF;
		display: flex;
		align-items: center;
		margin: 26upx 26upx 0 26upx;
		padding: 22upx 42upx;

		image {
			width: 72upx;
			height: 72upx;
			flex-shrink: 0;
			margin-right: 30upx;
		}

		.auditorInfo {
			display: flex;
			flex-direction: column;

			.auditorTitle {
				font-size: 36upx;
				font-weight: bold;
				color: #07080d;
			}

			.auditorText {
				font-size: 28rpx;
				color: #a0a0aa;
			}
		}
	}

	.progressBox {
		padding: 26upx 26upx 0 26upx;

		.progressBg {
			border-radius: 21upx;
			background-color: #FFFFFF;
			padding: 58upx 64upx;
			display: flex;
			flex-direction: column;
			.editBtn{
				height: 80upx;
				background-color: #ffb423;
				width: 100%;
				border-radius: 40upx;
				text-align: center;
				line-height: 80upx;
				font-size: 32upx;
				color: #FFFFFF;
			}
		}
		
		.settledStep {
			display: flex;

			.leftBox {
				display: flex;
				flex-direction: column;
				align-items: center;

				.stepNum {
					width: 56upx;
					height: 56upx;
					text-align: center;
					line-height: 56upx;
					border-radius: 50%;
					background-color: #a0a0aa;
					font-size: 36upx;
					font-weight: bold;
					color: #FFFFFF;
				}

				.stepLine {
					width: 3upx;
					flex-grow: 1;
					background-color: #a0a0aa;
				}
			}

			.rightInfo {
				display: flex;
				flex-direction: column;
				margin-left: 24upx;
				padding-bottom: 80upx;

				.stepName {
					font-size: 32upx;
					font-weight: bold;
					color: #07080d;
					margin-top: 8upx;
				}

				.stepInfo {
					font-size: 28rpx;
					color: #a0a0aa;
					margin-top: 26upx;

				}

				.stepBtn {
					margin-top: 18upx;
					width: 140upx;
					height: 56upx;
					border-radius: 21upx;
					border: 2upx solid #8e8e97;

					font-size: 26rpx;
					color: #8e8e97;
					text-align: center;
					line-height: 56upx;
				}
			}
		}

		.hasPassed {
			.leftBox {
				.stepNum {
					background-color: #ffb423;
					color: #000000;
				}

				.stepLine {
					background-color: #ffb423;
				}
			}

		}

		.inProcessing {
			.leftBox {
				.stepNum {
					background-color: #ffb423;
					color: #000000;
				}

				.stepLine {
					background-color: #a0a0aa;
				}
			}

			.rightInfo {
				.stepBtn {
					background-color: #ffb423;
					border: 2upx solid #ffb423;
					color: #000000;
				}
			}

		}
	}
</style>
